5 ทริคจัดหน้าเว็บไซต์ให้น่าอ่าน สำหรับมือใหม่หัด ออกแบบเว็บไซต์

เคยมั้ย? ลองคลิกเข้าไปในหน้าเว็บไซต์สักเว็บหนึ่งแล้วต้องคลิกกากบาทออกทันที เพราะสภาพหน้าเว็บไซต์ที่ดูยุ่งเหยิง ไม่เป็นระเบียบ ข้อมูลที่อัดแน่นจนตาลายหรือสีสันที่แสนจะแสบตา การ ออกแบบเว็บไซต์ ให้ดูน่าอ่านจึงเป็นสิ่งสำคัญมากสำหรับการทำเว็บไซต์ในยุคที่ธุรกิจออนไลน์เกิดขึ้นทุกวัน การแข่งขันก็สูงตามไปด้วย ผู้ใช้งานจึงอยากหาประสบการณ์ที่ราบรื่นบนเว็บไซต์ และการจัดวางข้อมูลให้เหมาะสมนี่แหละ สามารถเพิ่มโอกาสในการเข้าชมและเพิ่มเวลาที่ผู้ใช้อยู่ในเว็บไซต์ได้

การ ออกแบบเว็บไซต์ ที่ดี ไม่ใช่แค่เรื่องสวยงามเท่านั้น แต่มันคือวิธีการเล่าเรื่องของแบรนด์ผ่านภาพที่ไม่ต้องใช้คำพูดให้มากมาย โดยจะเน้นระบบโครงสร้างเว็บไซต์ที่ให้ผู้ชมเข้าใจสิ่งสำคัญที่เราต้องการจะสื่อได้ในพริบตา การเลือกจัดวางเนื้อหาให้เข้าใจง่าย ยิ่งผู้ใช้งานเข้าใจได้ไวก็จะยิ่งอยู่บนเว็บไซต์ได้นานมากขึ้น และมีโอกาสคลิกไปต่อได้สูงขึ้นด้วย

 

5 ทริคที่ช่วยให้เว็บไซต์น่าอ่านและน่าสนใจมากขึ้น

ใครที่เป็นมือใหม่ในเรื่องการ ออกแบบเว็บไซต์ บทความนี้คือคำตอบสำหรับคุณ เพราะการออกแบบที่ดี ไม่ใช่เน้นแค่ความสวย แต่ต้องตอบโจทย์ น่าอ่านและน่าสนใจด้วยนะ

 

1. อย่าใส่ข้อมูลเยอะจนเกินไป มี white space เพื่อพักสายตาบ้าง

คุณเคยเปิดไปเจอเว็บไซต์ที่ทุกตารางนิ้วถูกยัดด้วยข้อความหรือรูปภาพมั้ยคะ ทั้งข้อความ ป๊อปอัป สไลด์โชว์ คลิปวิดีโออีก รู้สึกเหนื่อยตั้งแต่ยังไม่ทันอ่านอะไรเลยใช่มั้ยล่ะ แค่เลื่อนตาก็ดูไม่ไหวแล้วมีแต่ตัวหนังสือเต็มไปหมด จุดนี้เองที่ white space กลายเป็นสิ่งที่จำเป็นบนหน้าเว็บไซต์ ไม่ใช่แค่เรื่องของความโล่งสบายตาเท่านั้น แต่ยังช่วยให้แต่ละเนื้อหานั้นเด่นชัดขึ้น มีจังหวะพักให้ผู้อ่านสามารถจับใจความได้ง่ายขึ้นเหมือนการเว้นวรรคในบทสนทนา  หากคุณสามารถจัดภาพและข้อความให้สมดุลบนหน้าเว็บไซต์ มันจะช่วยให้ผู้ชมอยู่ได้นานขึ้นโดยไม่รู้ตัว

 

2. ใช้สีแค่ 3 สีบนหน้าเว็บ

การใช้สีในการ ออกแบบเว็บไซต์ ก็เหมือนกับการแต่งตัว ถ้าสีเยอะเกินไปปลายทางอาจไม่ใช่มีสไตล์ แต่อาจกลายเป็นลายตาแทนได้นะ การเลือกใช้สีตามทฤษฎี 60:30:10 โดยใช้แค่ 3 สีหลักในการออกแบบจะช่วยให้โทนโดยรวมของเว็บไซน์ดูสบายตาและเป็นมืออาชีพมากขึ้น ซึ่ง 3 สีนั้น ประกอบไปด้วย

credite : www.andrewpetzer.co.za 

• สีหลัก 60% : สี CI หรือสีที่บ่งบอกถึงแบรนด์ ใช้เป็นสีพื้นหลัง สีตัวหนังสือในหัวข้อหลัก ในการกำหนดโทนสีของเว็บไซต์ทั้งหมด
• สีรอง 30% : สีที่เข้ามาช่วยทำให้สีหลักไม่น่าเบื่อ เพิ่มสีสันให้กับหน้าเว็บได้เป็นอย่างดี อาจเลือกเป็นสีในโทนเดียวกันหรือจะเป็นสีคู่ตรงข้ามเลยก็ได้ โดยใช้เป็นสีแบ่ง section สีหัวข้อรองหรือสีตัวอักษร
• สีไฮไลท์ 10% : สีที่เด่นที่สุดเมื่อจับมาวางอยู่บนสีหลักและสีรอง ใช้เป็นสีปุ่ม Call to Action หรือสีข้อความที่ต้องการเน้นให้เด่นที่สุดบนหน้าเว็บไซต์

ถ้าหากคุณคิดไม่ออกว่าสีของแบรนด์เราจะต้องใช้คู่สีไหนถึงจะดี

เรามีบทความ 8 เว็บไซต์แจกโค้ดสีฟรี เลือกคู่สีที่ใช่สำหรับออกแบบเว็บไซต์คุณ 

 

3.  เลือกใช้ 1-2 ฟอนต์ก็พอแล้ว

หลายคนอยากให้หน้าเว็บไซต์ของตัวเองดูแตกต่างจากคนอื่นด้วยการผสมฟอนต์หลายแบบลงไป แต่สุดท้ายกลับกลายเป็นอ่านยากกว่าเดิม แถมไม่มีลูกค้าคนไหนอยู่อ่านนาน ๆ จน bounce rate สูงปรี้ด เพราะแต่ละฟอนต์ก็มีบุคลิกเป็นของตัวเอง เวลานำมาใช้หลาย ๆ แบบพร้อมกัน ผลลัพธ์ที่ออกมากลับทำให้หน้าเว็บไซต์ดูวุ่นวายโดยไม่รู้ตัว การใช้แค่ 1 หรือ 2 ฟอนต์ที่เข้ากัน จะช่วยสร้างภาพรวมที่ดูเรียบร้อยแต่ยังมีลูกเล่น เช่น เลือกฟอนต์แรกที่ดูโมเดิร์นและเข้ากับแบรนด์ที่สุดในส่วนหัวข้อ (Heading) และเลือกใช้อีกฟอนต์ที่อ่านง่ายสำหรับเนื้อหาหลักที่มีความยาว เช่น Sans Serif , Roboto หรือ Open Sans เป็นตัวเลือกที่ดีสำหรับเนื้อหายาว ๆ เพราะอ่านง่าย ระวังอย่าเผลอใช้ฟอนต์ที่เป็นลูกเล่นมากเกินไปเพราะจะทำให้ลูกค้าเมื่อยตาได้ง่ายสำหรับการอ่านบนหน้าจอเล็ก ๆ  อย่างบนมือถือได้ค่ะ

 

4. แบ่งสัดส่วนของหน้าเพจในการ ออกแบบเว็บไซต์ ให้ดี

หากคุณเตรียมข้อมูลมาอย่างดี แต่จัดวางไม่ดี กระจัดกระจายหรืออัดแน่นจนหาจุดโฟกัสไม่ได้ ข้อมูลและวัตถุดิบที่เตรียมมาอย่างดีนั้นก็สูญเปล่า การจัดวางข้อมูลบนหน้าเว็บไซต์ไม่ใช่แค่จัดให้อ่านง่าย แต่ต้องทำให้ผู้ใช้งานเข้ามาในเว็บไซต์แล้วรู้สึกว่าค้นหาสิ่งที่เขาต้องการได้ไม่ยาก การแยกสัดส่วนของเว็บไซต์ให้ชัดเจน อย่างเช่น Header หรือตัวเนื้อหาที่ถูกทำให้โดดเด่นด้วย layout สีหรือกรอบ และ Footer ที่เด่นชัด ข้อมูลสำคัญครบ จะเป็นตัวช่วยให้การนำทางที่ดูเป็นมิตรกับสายตาได้เป็นอย่างดี

ในระบบเว็บไซต์ของ MakeWebEasy มีเครื่องมือที่ช่วยให้คุณ ออกแบบเว็บไซต์ ได้เป็นสัดเป็นส่วนอย่าง ‘Grid’ ที่จะโชว์ให้เห็นเลยว่าพื้นที่ไหนแน่นหรือโล่งเกินไป ช่วยให้ข้อมูลเรียงตัวสวยอย่างมีระเบียบ ดูสะอาดตา ซึ่งช่วยให้คุณสามารถจัดสรรพื้นที่บนหน้าเว็บไซต์ได้ง่ายยิ่งขึ้น      

 

5. เพิ่มลูกเล่นให้หน้าเว็บไซต์ ไม่ให้ดูแข็งทื่อ

คงไม่มีลูกค้าคนไหนอยากเข้ามาดูเว็บไซต์ที่นิ่งเหมือนกับกระดาษเอกสารหรอกใช่มั้ยคะ ถึงแม้เนื้อหาจะดี คนก็กดปิดไปได้ง่าย ๆ การใส่ลูกเล่นเล็ก ๆ อย่างเส้นโค้ง เส้นแบ่งเนื้อหาหรือเพิ่มการเคลื่อนไหว (Animation) เข้าไปก็เป็นการเพิ่มชีวิตชีวาและทำให้การดูเว็บไซต์ไม่น่าเบื่ออีกต่อไป ลองเปิดเว็บไซต์ของคุณแล้วปรับจากเส้นตรงเป็นเส้นโค้ง รูปภาพครอปสี่เหลี่ยมปรับเป็นวงกลม ใส่เงาให้กับภาพเพิ่มมิติ ใส่อนิเมชั่นให้ตัวหนังสือที่เป็นหัวข้อหลักค่อย ๆ เฟดเข้ามา หรือแม้กระทั่งเลือกเปลี่ยนสีปุ่มตอนเอาเมาส์ hower แค่ปรับนิด ๆ หน่อย ๆ ก็ทำให้เว็บไซต์ดูน่าสนใจขึ้นเยอะ 

 

ข้อควรระวังในการ ออกแบบเว็บไซต์

ความผิดพลาดเกิดขึ้นได้เสมอ และเบสิคที่สุดที่คนทำเว็บไซต์มือใหม่หลายคนพลาดคือ การพยายามยัดทุกอย่างลงหน้าเดียว พอมีเนื้อหามาก ก็ใช้สีต่างกัน หัวข้อหลายฟอนต์ วางทุกอย่างใกล้ ๆ กันจนกลายเป็นชุดข้อมูลที่ไม่น่าดูไปเลย อีกเรื่องคือการไม่คุมธีมของเว็บให้เป็นไปในโทนเดียวกัน บางเว็บไซต์หน้าแรกดูจริงจังเป็นทางการ แต่พอเข้าไปหน้าในกลับกลายเป็นโทนสดใส ดูเฟรนด์ลี่ ทั้งหมดนี้ทำให้ผู้ใช้งานที่เข้ามาในเว็บไซต์อาจสับสนได้ง่ายและสิ่งนี้อาจลดความน่าเชื่อถือในแบรนด์ไปแบบไม่รู้ตัว

 

 

รู้แล้ว ลองเลย!

เว็บที่ดีไม่ได้เกิดจากดีไซน์หรูหราหรือกราฟิก อนิเมชั่นที่อลังการเพียงอย่างเดียว ในฐานะเจ้าของเว็บไซต์ เราควรเน้นในเรื่องของความรู้สึกและประสบการณ์ที่ผู้ใช้งานได้รับจากการใช้งานจริงมากกว่า ทั้งการจัดหน้าเว็บไซต์ให้ดูเป็นระเบียบ สบายตา เข้าถึงสิ่งที่ต้องการได้ง่าย ดีเทลเล็ก ๆ ที่รวมกันเป็นองค์ประกอบของทั้งหมดบนเว็บไซต์ที่น่าอยู่และผู้เข้าชมก็ต่างยินดีที่จะอยู่กับแบรนด์ของเราให้นานขึ้น log in เข้าระบบเว็บไซต์แล้วลองหยิบเทคนิคเหล่านี้ไปปรับทีละนิด หากผลลัพธ์ดีขึ้นก็ค่อยขยายต่อ เพราะการดีไซน์ไม่ใช่เรื่องต้องสมบูรณ์ตั้งแต่วันแรก แค่เริ่มต้นได้ดีก็พัฒนาต่อไปได้อีกมากเลยล่ะค่ะ